<template>
  <div v-if="show" class="opening-dialog">
    <div class="dialog-content">
      <h3>开局推荐</h3>
      
      <div v-if="recommendations.length > 0" class="recommendations">
        <div 
          v-for="rec in recommendations" 
          :key="rec.opening.code"
          class="recommendation-card"
          :class="{ 'selected': selectedOpening === rec.opening }"
          @click="selectOpening(rec.opening)"
        >
          <div class="opening-header">
            <h4>{{ rec.opening.name }}</h4>
            <div class="confidence-badge" :style="getConfidenceStyle(rec.confidence)">
              {{ (rec.confidence * 100).toFixed(0) }}%
            </div>
          </div>

          <div class="opening-stats">
            <div class="stat">
              <span class="label">胜率</span>
              <span class="value">{{ (rec.opening.winRate * 100).toFixed(1) }}%</span>
            </div>
            <div class="stat">
              <span class="label">复杂度</span>
              <span class="value">{{ getComplexityText(rec.opening.complexity) }}</span>
            </div>
            <div class="stat">
              <span class="label">风格</span>
              <span class="value">{{ getStyleText(rec.opening.style) }}</span>
            </div>
          </div>

          <div class="opening-reason">
            {{ rec.reason }}
          </div>

          <div v-if="rec.alternativeMoves.length > 0" class="alternative-moves">
            <h5>可选走法:</h5>
            <div class="moves-list">
              <div 
                v-for="(move, index) in rec.alternativeMoves.slice(0, 3)" 
                :key="index"
                class="move-item"
              >
                {{ move.move }}
                <span class="move-stats">
                  (胜率: {{ (move.winRate * 100).toFixed(1) }}%)
                </span>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div v-else class="no-recommendations">
        没有找到合适的开局推荐
      </div>

      <div class="opening-details" v-if="selectedOpening">
        <h4>开局详情</h4>
        <div class="detail-section">
          <h5>关键位置</h5>
          <ul>
            <li v-for="(pos, index) in selectedOpening.keyPositions" :key="index">
              {{ pos }}
            </li>
          </ul>
        </div>
        <div class="detail-section">
          <h5>常见战术</h5>
          <ul>
            <li v-for="(tactic, index) in selectedOpening.typicalTactics" :key="index">
              {{ tactic }}
            </li>
          </ul>
        </div>
      </div>

      <div class="dialog-buttons">
        <button 
          v-if="selectedOpening"
          @click="handleSelect"
        >
          选择此开局
        </button>
        <button @click="$emit('close')">关闭</button>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, computed } from 'vue'
import type { Opening, OpeningRecommendation } from '../types/opening'

const props = defineProps<{
  show: boolean
  recommendations: OpeningRecommendation[]
}>()

const emit = defineEmits<{
  (e: 'close'): void
  (e: 'select', opening: Opening): void
}>()

const selectedOpening = ref<Opening | null>(null)

const getConfidenceStyle = (confidence: number) => ({
  backgroundColor: `hsl(${confidence * 120}, 70%, 50%)`
})

const getComplexityText = (complexity: string) => {
  const texts = {
    basic: '基础',
    intermediate: '中等',
    advanced: '高级'
  }
  return texts[complexity as keyof typeof texts]
}

const getStyleText = (style: string) => {
  const texts = {
    positional: '位置',
    tactical: '战术',
    dynamic: '动态'
  }
  return texts[style as keyof typeof texts]
}

const selectOpening = (opening: Opening) => {
  selectedOpening.value = opening
}

const handleSelect = () => {
  if (selectedOpening.value) {
    emit('select', selectedOpening.value)
    emit('close')
  }
}
</script>

<style scoped>
.opening-dialog {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.5);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 1000;
}

.dialog-content {
  background: white;
  padding: 20px;
  border-radius: 8px;
  min-width: 800px;
  max-height: 80vh;
  overflow-y: auto;
}

.recommendations {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 20px;
  margin: 20px 0;
}

.recommendation-card {
  padding: 15px;
  border: 1px solid #ccc;
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.3s ease;
}

.recommendation-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

.recommendation-card.selected {
  border-color: #4CAF50;
  background-color: #f1f8e9;
}

.opening-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 10px;
}

.confidence-badge {
  padding: 4px 8px;
  border-radius: 12px;
  color: white;
  font-weight: bold;
}

.opening-stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  margin: 10px 0;
}

.stat {
  text-align: center;
}

.label {
  font-size: 12px;
  color: #666;
}

.value {
  display: block;
  font-weight: bold;
}

.opening-reason {
  margin: 10px 0;
  font-style: italic;
  color: #666;
}

.alternative-moves {
  margin-top: 10px;
}

.moves-list {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}

.move-item {
  background: #f5f5f5;
  padding: 4px 8px;
  border-radius: 4px;
  font-family: monospace;
}

.move-stats {
  font-size: 12px;
  color: #666;
}

.opening-details {
  margin-top: 20px;
  padding-top: 20px;
  border-top: 1px solid #eee;
}

.detail-section {
  margin: 10px 0;
}

.detail-section ul {
  margin: 0;
  padding-left: 20px;
}

.dialog-buttons {
  margin-top: 20px;
  display: flex;
  justify-content: flex-end;
  gap: 10px;
}

button {
  padding: 8px 16px;
  border: none;
  border-radius: 4px;
  background-color: #4CAF50;
  color: white;
  cursor: pointer;
}

button:hover {
  background-color: #45a049;
}
</style> 